<template>
	<view class="invoice-details">
		<view class="invoice-details-title">开票中</view>
		<view class="row1">
			<view class="title">发票信息</view>
			<view class="form">
				<view class="form-item">
					<view class="form-item-label">发票抬头</view>
					<view class="form-item-value">北京联和利泰科技股份有限公司</view>
				</view>
				<view class="form-item">
					<view class="form-item-label">发票金额</view>
					<view class="form-item-value">￥341.20</view>
				</view>
				<view class="form-item">
					<view class="form-item-label">开票时间</view>
					<view class="form-item-value">2023-04-11 15:07</view>
				</view>
				<view class="form-item">
					<view class="form-item-label">发票内容</view>
					<view class="form-item-value">商品明细</view>
				</view>
			</view>
		</view>

		<view class="row2">
			<view class="title">所含订单</view>
			<view class="tips">
				<text style="margin-right: 12rpx;">共4个订单</text>
				<u-icon name="arrow-right" color="#878787" size="14"></u-icon>
			</view>
		</view>

		<view class="row3">
			<view class="title">接收方式</view>
			<view class="form">
				<view class="form-item">
					<view class="form-item-label">电子发票</view>
					<view class="form-item-value">2691*****@qq.com</view>
				</view>
			</view>
		</view>
		
		<view class="row3">
			<view class="title">失败原因</view>
			<view class="form">
				<view class="form-item">
					没有网络连接
				</view>
			</view>
		</view>
		<!-- 按钮 -->
		<view class="footer" v-if="true">
			<view class="footer-btn1">查看发票</view>
			<view class="footer-btn2">重开发票</view>
			<view class="footer-btn3">发送到邮箱</view>
		</view>
		<view class="footer" v-else>
			<!-- 开票失败 -->
			<view class="footer-tool">开具发票</view>
		</view>
	</view>
</template>
<script>
	export default {
		name: 'InvoiceDetails',
		data() {
			return {}
		},
		methods: {},
	}
</script>
<style lang="scss" scoped>
	page {
		background-color: #F7F7F7;
	}

	.invoice-details {
		.footer {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			padding-top: 24rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #FFFFFF;
			padding-bottom:  calc(56rpx + env(safe-area-inset-bottom)); // 适配苹果遮层
			.footer-tool{
				width: 622rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				border-radius: 40rpx;
				border: 2rpx solid #EEEEEE;
				font-size: 30rpx;
				color: #1F1F1F;
			}
			.footer-btn1 {
				width: 190rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				border-radius: 40rpx;
				color: #1F1F1F;
				border: 2rpx solid #EEEEEE;
			}

			.footer-btn2 {
				width: 190rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				border-radius: 40rpx;
				color: #1F1F1F;
				border: 2rpx solid #EEEEEE;
				margin: 0 26rpx;
			}

			.footer-btn3 {
				width: 190rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				background: #FD8F19;
				color: #FFFFFF;
				border-radius: 40rpx;
			}
			.footer-btn1,.footer-btn2,.footer-btn3{
				font-size: 30rpx;
				font-weight: bold;
			}
			
		}

		.invoice-details-title {
			font-size: 46rpx;
			color: #1F1F1F;
			font-weight: bold;
			margin-left: 64rpx;
			margin-top: 32rpx;
			margin-bottom: 32rpx;
		}

		.row3 {
			width: 686rpx;
			height: 173rpx;
			margin: 0 auto;
			margin-top: 24rpx;
			background: #FFFFFF;
			border-radius: 30rpx;
			box-sizing: border-box;
			padding: 32rpx 32rpx 0 32rpx;

			.title {
				color: #1F1F1F;
				font-weight: bold;
				font-size: 32rpx;
			}

			.form {
				.form-item {
					margin-top: 24rpx;
					display: flex;

					.form-item-value {
						margin-left: 56rpx;
						font-size: 28rpx;
						color: #1F1F1F;
					}

					.form-item-label {
						font-size: 28rpx;
						font-weight: 400;
						color: #878787;
					}
				}
			}
		}

		.row2 {
			width: 686rpx;
			height: 109rpx;
			margin: 0 auto;
			margin-top: 24rpx;
			background: #FFFFFF;
			border-radius: 30rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 32rpx;

			.tips {
				display: flex;
				color: #878787;
			}

			.title {
				color: #1F1F1F;
				font-weight: bold;
				font-size: 32rpx;
			}
		}

		.row1 {
			width: 686rpx;
			height: 365rpx;
			margin: 0 auto;
			background: #FFFFFF;
			border-radius: 30rpx;
			box-sizing: border-box;
			padding: 32rpx 32rpx 0 32rpx;

			.title {
				color: #1F1F1F;
				font-weight: bold;
				font-size: 32rpx;
			}

			.form {


				.form-item {
					margin-top: 24rpx;
					font-size: 28rpx;
					display: flex;

					.form-item-label {
						color: #878787;
					}

					.form-item-value {
						color: #1F1F1F;
						margin-left: 56rpx;
					}
				}
			}
		}
	}
</style>
